<template>
	<view class="subscribe">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订阅消息模板</block>
		</cu-custom>
		<!-- 设置列表 -->
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class='action'>
				<text class='cuIcon-titles text-orange '></text>
				订阅消息模板列表
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top" v-for="(item,idx) in templates" :key="idx" :id="item._id"
			:data-title="item.title" :data-templatedid="item.priTmplId" @tap="showModol">
			<view class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-title text-orange "></text>
						{{item.title}}
					</view>
					<view class="text-gray text-sm">
						可用的消息次数：{{item.sendCount||0}}
					</view>
				</view>
			</view>
		</view>

		<view :class="isShow?'cu-modal show':'cu-modal'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class='content'>增加{{curTitle}}模版消息</view>
					<view class='action' @tap='hideModal'>
						<text class='cuIcon-close text-red'></text>
					</view>
				</view>
				<view class='padding-xl'>
					<view>{{curTitle}}点击生成次数：{{templateIds.length}}</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class='action'>
						<button class='cu-btn line-green text-green' @tap='templateGen'>点击生成</button>
						<button class='cu-btn bg-green margin-left' @tap='saveTemplateIds'>批量保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../utils/util.js';
	import api from '../../utils/api.js';
	export default {
		data() {
			return {
				templates: [{
					"priTmplId": "jH8fhaTwse3BKJ9riWdGUPThJz5KxhdF1w6C8OanLaw",
					"title": "留言通知"
				}],
				isShow: false,
				templateIds: [],
				curTemPlatedId: "",
				curTitle: ""
			};
		},
		onLoad: async function(options) {
			await this.sendCount();
		},
		methods: {
			/**
			 * 显示
			 * @param {} e
			 */
			showModol(e) {
				this.isShow = true;
				this.curTemPlatedId = e.currentTarget.dataset.templatedid;
				this.curTitle = e.currentTarget.dataset.title;
			},
			/**
			 * 隐藏
			 * @param {*} e
			 */
			hideModal(e) {
				this.isShow = false;
				this.curTemPlatedId = "";
				this.curTitle = "";
			},
			sendCount:async function(){
				let that = this;
				for (var index in that.templates) {
					var res = await api.querySubscribeCount(that.templates[index].priTmplId);
					console.info(res);
					
					let change = that.templates[index];
					change.sendCount = res.result.formIds;
					
					that.$set(that.templates,index,change);
				}
			},
			/**
			 * 生成formId
			 * @param {*} e
			 */
			templateGen(e) {
				let that = this;
				if (that.templateIds.length > 10) {
					uni.showToast({
						title: '超过生成上限啦',
						icon: 'none',
						image: '',
						duration: 1500
					});
					return;
				}

				uni.requestSubscribeMessage({
					tmplIds: [that.curTemPlatedId],
					success(res) {
						that.templateIds = that.templateIds.concat(that.curTemPlatedId);
					},
					fail(res) {
						console.info(res)
						uni.showToast({
							title: '小程序不再让生成啦',
							icon: 'none',
							image: '',
							duration: 1500
						});
					}
				})
			},

			/**
			 * 保存
			 * @param {*} e
			 */
			async saveTemplateIds(e) {

				let that = this;
				if (that.templateIds.length === 0) {
					return;
				}

				uni.showLoading({
					title: '保存中...',
				})
				let res = await api.addSubscribeCount(that.templateIds);
				console.info(res)
				if (res.result) {
					that.templateIds = [];
					that.isShow = false;
					await that.sendCount();
					uni.showToast({
						title: '保存完成',
						icon: 'none',
						duration: 1500
					});
				} else {
					uni.showToast({
						title: '保存出现异常',
						icon: 'none',
						duration: 1500
					})
				}
				uni.hideLoading()
			}
		},
	};
</script>

<style>

</style>
